<template>
	<view class="wrap">
		<view class="banner">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in bannerList" :key="index" @click="jumpBanner(item.id)">
					<image :src="item.imgUrl" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="menu flex flex-h-start flex-row">
			<view class="menu-list flex flex-col flex-v-center flex-between" v-for="(item,index) in menuList"
				:key="index" @click="pop(item)">
				<image :src="item.iconImg" mode=""></image>
				<view class="name">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="code flex flex-between">
			<view class="code-lt">
				<image src="../../static/image/006.png" mode=""></image>
			</view>
			<view class="code-rt flex flex-col flex-between">
				<view class="title">车铠甲二维码挪车贴</view>
				<view class="text-fee flex flex-h-start flex-v-center">
					<view class="text">
						<image src="../../static/image/007.png" mode=""></image>
					</view>
					<view class="fee">9.99</view>
				</view>
				<text class="take">0元免费领</text>
			</view>
		</view>
		<view class="take-code">
			<text class="flex flex-h-center flex-v-center" @click="jump(0)">一键申请挪车码</text>
		</view>
		<view class="ask">
			<view class="ask-top flex flex-between flex-v-center">
				<view class="title">新闻咨询</view>
				<view class="more" @click="jump(1)">更多></view>
			</view>
			<view class="ask-info">
				<view class="info-list flex flex-between" v-for="(item,index) in infoList" :key="index"
					@click="jumpDetail(item.id)">
					<view class="lt flex flex-col flex-between">
						<view class="title twoline">{{item.title}}</view>
						<view class="time-zan flex flex-between flex-v-center">
							<view class="time"> {{item.updateTime.substring(0,10)}}</view>
							<view class="zan">点赞：{{item.zanNum}}</view>
						</view>
					</view>
					<view class="rt">
						<image :src="item.coverImg" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="flex flex-h-center bottom">--到底了--</view>
		<u-popup v-model="show" mode="center" border-radius="10" width="700">
			<view class="pop">
				<view class="title">一键救援</view>
				<view class="tel">救援电话：400-800-8585</view>
				<view class="dial flex flex-h-center">
					<text class="flex flex-h-center flex-v-center" @click="call(0)">一键拨打救援电话</text>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="insure" mode="center" border-radius="10" width="700">
			<view class="pop">
				<view class="title">保险咨询</view>
				<view class="tel">咨询电话：400-800-8585</view>
				<view class="dial flex flex-h-center">
					<text class="flex flex-h-center flex-v-center" @click="call(1)">一键拨打咨询电话</text>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="notOpen" mode="center" border-radius="10" width="700">
			<view class="pop">
				<view class="title">车铠甲友善提示</view>
				<view class="tel">暂未开放，敬请期待</view>
				<view class="dial flex flex-h-center">
					<text class="flex flex-h-center flex-v-center" @click="closed">关闭</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: [],
				menuList: [],
				show: false,
				insure: false,
				notOpen:false,
				infoList: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				mobile:''
			}
		},
		onLoad() {
			this.getBanner();
			this.getInfo();
			this.getMenu();
		},
		methods: {
			pop(item) {
				console.log(item);
				if(item.childCode=='rescue_home'){
					this.show = true
					this.mobile = item.remark;
				}
				if(item.childCode=='car_wash'){
					this.notOpen = true;
				}
				if(item.childCode=='find_violation'){
					uni.navigateTo({
						url: "../violation"
					})
				}
				if(item.childCode=='oli_find'){
					uni.navigateTo({
						url: "../petrol"
					})
				}
				if(item.childCode=='insurance_find'){
				   this.insure = true;
				   this.mobile = item.remark;
				}
				// if (index == 0) {
					
				// 	this.insure = true;
				// }
				// if (index == 1) {
				// 	uni.navigateTo({
				// 		url: "../petrol"
				// 	})
				// }
				
				// if (index == 2) {
				// 	uni.navigateTo({
				// 		url: "../violation"
				// 	})
				// }
				// if (index == 3) {
				// 	this.notOpen = true;
				// }
				// if (index == 4) {
				// 	this.show = true
				// }
			},
			getBanner() {
				this.$https.request('/cli/home/banner', true, {
					pageCode: 'HOME_PAGE'
				}).then((res) => {
					if (res.code == 0) {
						this.bannerList = res.data;
						console.log(this.bannerList)

					} else if (res.code == 201) {
						uni.navigateTo({
							url: '../login/login'
						})

					} else {
						this.LoadingMsg(res.msg);
						setTimeout(function() {
							uni.hideLoading();
						}, 1000)
					}

				})
			},
			getMenu(){
				this.$https.request('/cli/home/findPage', true, {
					pageCode: 'HOME_PAGE'
				}).then((res) => {
					if (res.code == 0) {
						this.menuList = res.data.childs;
				
					} else if (res.code == 201) {
						uni.navigateTo({
							url: '../login/login'
						})
				
					} else {
						this.LoadingMsg(res.msg);
						setTimeout(function() {
							uni.hideLoading();
						}, 1000)
					}
				
				})
			},
			getInfo() {
				this.$https.request('/cli/news/list', true, {
					pageNum: 1,
					pageSize: 10
				}).then((res) => {
					if (res.code == 0) {
						this.infoList = res.data.list;

					} else if (res.code == 201) {
						uni.navigateTo({
							url: '../login/login'
						})

					} else {
						this.LoadingMsg(res.msg);
						setTimeout(function() {
							uni.hideLoading();
						}, 1000)
					}

				})
			},
			jumpBanner(id) {
				uni.navigateTo({
					url: "../bannerDetail?id=" +id
				})
			},
			jumpDetail(id) {
				uni.navigateTo({
					url: '../message?id=' + id
				})
			},
			call(type) {
				if(type==0){
					uni.makePhoneCall({
						phoneNumber: this.mobile //仅为示例
					});	
				}
				
				
				if(type==1){
					uni.makePhoneCall({
						phoneNumber: this.mobile //仅为示例
					});	
				}
				
			},
            closed(){
				this.notOpen = false;
			},
			jump(type) {
				if (type == 0) {
					if(uni.getStorageSync('codeImg')&&uni.getStorageSync('token')){
							uni.navigateTo({
								url:"../playbill"
						})
					}else{
						uni.navigateTo({
							url: "../code"
						})
					}
				}
				if (type == 1) {
					uni.navigateTo({
						url: '../messageList'
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		.bottom{
			color: #999;
			font-size: 26rpx;
			padding: 60rpx 0;
		}
		.banner {
			swiper {
				width: 100%;
				height: 360rpx;

				image {
					width: 100% !important;
				}
			}
		}

		.pop {
			.title {
				text-align: center;
				width: 100%;
				padding-top: 35rpx;
				font-family: HiraginoSansGB-W6;
				font-size: 36rpx;
				color: #000;
				font-weight: 900;
			}

			.tel {
				text-align: center;
				width: 100%;
				padding: 80rpx 0;
				font-family: HiraginoSansGB-W6;
				font-size: 30rpx;
				color: #333;
			}

			.dial {
				padding-bottom: 55rpx;

				text {
					text-align: center;
					width: 600rpx;
					height: 80rpx;
					font-family: HiraginoSansGB-W6;
					font-size: 30rpx;
					color: #fff;
					background-color: #2A90FF;
					border-radius: 10rpx;
				}

			}
		}

		.ask {
			padding: 30rpx;

			.ask-info {
				padding-top: 40rpx;

				.info-list {
					padding-bottom: 40rpx;

					.lt {
						width: calc(100% - 220rpx);
						padding-right: 20rpx;

						.title {
							font-family: HiraginoSansGB-W6;
							font-size: 28rpx;
							color: #333;
						}

						.time-zan {
							.time {
								font-family: HiraginoSansGB-W3;
								font-size: 24rpx;
								color: #999;
							}

							.zan {
								font-family: HiraginoSansGB-W3;
								font-size: 24rpx;
								color: #999;
								padding-left: 5rpx;
							}
						}
					}

					.rt {
						width: 220rpx;

						image {
							width: 220rpx;
							height: 150rpx;
							border-radius: 20rpx;
						}
					}
				}

			}

			.ask-top {
				.title {
					font-family: HiraginoSansGB-W6;
					font-size: 30rpx;
					color: #000000;
					font-weight: 900;
				}

				.more {
					font-family: HiraginoSansGB-W3;
					font-size: 24rpx;
					color: #666;
				}
			}
		}

		.take-code {
			padding: 20rpx 30rpx;

			text {
				width: 100%;
				border-radius: 10rpx;
				background-color: #2A90FF;
				height: 80rpx;
				font-family: HiraginoSansGB-W6;
				color: #fff;
				font-size: 30rpx;
			}
		}

		.code {
			padding: 40rpx 30rpx 20rpx 30rpx;

			.code-lt {
				width: 230rpx;

				image {
					width: 230rpx;
					height: 200rpx;
				}
			}

			.code-rt {
				width: calc(100% - 270rpx);

				.title {
					font-family: HiraginoSansGB-W6;
					color: #000;
					font-size: 30rpx;
				}

				.text-fee {
					.text {
						image {
							width: 125rpx;
							height: 40rpx;
						}
					}

					.fee {
						font-family: HiraginoSansGB-W6;
						color: #FF5608;
						font-size: 36rpx;
						text-decoration: line-through;
						font-weight: 900;
						padding-left: 30rpx;
					}

					.take {
						font-family: HiraginoSansGB-W3;
						color: #666;
						font-size: 24rpx;
					}
				}
			}
		}

		.menu {
			padding: 0 30rpx;

			.menu-list {
				width: 20%;
				padding-top: 40rpx;

				image {
					width: 70rpx;
					height: 70rpx;
				}

				.name {
					padding-top: 30rpx;
					font-family: HiraginoSansGB-W3;
					color: #333;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
